<template>
  <div class="reservation_content">
    <div class="reservation_content_top">
      <div class="reservation_content_top_left">
        <div class="show_reservation_date">{{ showStartDate }}~{{ showEndDate }}</div>
        <!-- <div class="show_reservation_change">
          <i class="el-icon-arrow-left show_reservation_change_icon"></i>
          <i class="el-icon-arrow-right show_reservation_change_icon"></i>
        </div> -->
      </div>
      <div>
        <el-button style="position: relative; z-index: 10;"
          size="small"
          icon="el-icon-refresh"
          @click.stop="toRefreshData">刷新</el-button>
        <!-- <el-button style="position: relative; z-index: 10;"
          size="small"
          @click.stop="showSubscribeTime">关闭预约时间</el-button> -->
        <el-button type="primary"
          plain
          style="position: relative; z-index: 10;"
          size="small"
          @click.stop="toMakePlan">制定方案</el-button>
        <!-- <el-button type="primary"
          style="position: relative; z-index: 10;"
          size="small"
          @click.stop="toCreateOrder">创建预约单</el-button> -->
      </div>

      <div class="show_store_name">{{ storeTitle }}</div>
    </div>
    <div class="board_plan"
      ref="boardPlan">
      <div class="board_plan_times"
        :style="{ height: `${82 + planBoxLine * 30}px`, left: `${timeStepLeft}px` }">
        <div class="board_plan_times_top"
          :style="[{ top: `${timeStepTop}px` }, timeStepLeft == 0 && { 'border-right': 'none' }]"></div>
        <div class="board_plan_times_item"
          v-for="(item, index) in planStep"
          :key="index"
          :style="[timeStepLeft > 0 && { 'border-right': '1px solid #eee' }]">
          <template v-if="item.step.length > 0">
            <!-- <div class="plan_item_time">{{item.time}}</div> -->
            <div class="plan_item_step_list">
              <div class="plan_item_step"
                v-for="(val, idx) in item.step"
                :key="idx">
                <div :class="['play_item_step_txt', hoverTimeStr == val.nameStr && 'play_item_step_txt_hover']">
                  {{ val.nameStr }} - {{ val.endTimeStr }}</div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="board_plan_date"
        :style="{ height: `${52 + planBoxLine * 30}px` }">
        <div class="board_plan_date_item"
          v-for="(cItem, cIdx) in boardList"
          :key="cIdx"
          :style="{
            width: `${cItem.children.length > 2 ?
              cItem.children.length * minWidth : cItem.children.length == 2 ? cItem.children.length * secondWidth : cardWidth}px`
          }">
          <div class="board_plan_date_top">
            <div class="board_plan_date_top_float"
              :style="{ top: `${timeStepTop}px`, backgroundColor: cIdx % 2 == 0 ? '#70AD47' : '#FFC000' }">
              {{ cItem.weekDay }}({{ cItem.monthDateStr }})</div>
          </div>
          <div class="board_plan_date_technician">
            <div class="item_board_plan_technician_box"
              :style="[{ top: `${timeStepTop}px` }]">
              <div class="item_board_plan_technician "
                :style="[cItem.children.length > 1 ? {
                  width: `${cItem.children.length == 2 ? secondWidth : minWidth}px`,
                  left: `${cItem.children.length == 2 ? tIdx * secondWidth : tIdx * minWidth}px`
                } : { width: `${cardWidth}px` }]"
                v-for="(tItem, tIdx) in cItem.technicianList"
                :key="tIdx">{{ tItem }}</div>
            </div>
            <div class="item_board_plan_technician"
              v-if="!cItem.technicianList.length"
              :style="[{ top: `${timeStepTop}px` }]"></div>
          </div>
          <div class="board_plan_date_line"
            v-for="(item, index) in planStep"
            :key="index">
            <div :class="['board_plan_date_line_item',
              hoverTimeStr == val.nameStr && 'board_plan_date_line_item_hover',
              hoverTimeStr == val.nameStr && hoverDate == cItem.date && 'board_plan_date_line_date_hover',
              toCheckTimeDisabled(cItem.disabledList, val.nameStr) && 'board_plan_date_line_date_disabled']"
              v-for="(val, idx) in item.step"
              :key="idx"
              :style="[(index == 0 && idx == 0) && { height: '39px' }]">
              <!-- <span class="show_item_date"
                v-if="hoverTimeStr == val.nameStr && hoverDate == cItem.date">{{cItem.weekDay}}({{cItem.monthDateStr}}) {{val.nameStr}}</span> -->
              <div v-for="(pv, i) in cItem.children"
                style="width: 100%;height: 100%"
                :key="`${idx}_${i}`"
                class="show_item_date"
                :style="[cItem.children.length > 1 ? {
                  width: `${cItem.children.length == 2 ? secondWidth : minWidth}px`,
                  left: `${cItem.children.length == 2 ? i * secondWidth : i * minWidth}px`
                } : { width: `${cardWidth}px` }]"></div>
              <div v-for="(pv, i) in cItem.children"
                :key="`list_${idx}_${i}`">
                <template v-for="(v, cI) in pv">
                  <div class="show_item_disabled_box"
                    v-for="(dv, di) in v.disableList"
                    :key="`${i}_${cI}_${di}`"
                    v-if="val.nameStr == dv.disableStartT"
                    :style="[{ 'height': `${dv.disabledNeedStep * 40}px` },
                    cItem.children.length > 1 ? {
                      width: `${cItem.children.length == 2 ? secondWidth : minWidth}px`,
                      left: `${cItem.children.length == 2 ? i * secondWidth : i * minWidth}px`
                    } : { width: `${cardWidth}px` }]"
                    @click="toOptTime(cItem.date, v)">
                    {{dv.remark}}
                  </div>

                  <div class="show_item_card"
                    v-if="v.time && v.time == val.nameStr && v.reservationInfo"
                    :style="[{ 'z-index': v.cIdx },
                    cItem.children.length > 1 ? {
                      width: `${cItem.children.length == 2 ? secondWidth : minWidth}px`,
                      left: `${cItem.children.length == 2 ? i * secondWidth : i * minWidth}px`
                    } : { width: `${cardWidth}px` }]">
                    <div class="show_item_card_box"
                      @click.stop="toJumpService(v, cItem.date)">
                      <div class="show_item_card_title"
                        :style="{ 'backgroundColor': v.serviceStatus == '1' ? '#FEC171' : (v.serviceStatus == '2' || v.serviceStatus == '3') ? '#30B08F' : v.serviceStatus == '100' ? '#E65D6E' : '#5da9ef' }">
                        <div class="show_item_card_title_txt">
                          {{ v.reservationInfo.staffName }}
                          <span v-if="v.technicianName">({{ v.technicianName }})</span>
                        </div>
                        <div class="show_item_card_title_time">
                          {{ v.time }}<span v-if="v.endDate">-{{ v.endDate }}</span>
                          <div class="show_item_card_tag"
                            v-if="v.isFirst == '1'">初</div>
                        </div>
                      </div>
                      <div class="show_item_card_desc"
                        :style="{
                        'backgroundColor': v.serviceStatus == '1' ? 'rgba(254,193,113, 0.3)' : (v.serviceStatus == '2' || v.serviceStatus == '3') ? 'rgba(48,176,143,0.3)' : v.serviceStatus == '100' ? 'rgba(230,93,110,0.5)' : 'rgba(93,169,239,0.3)',
                        'height': `${(v.needStep - 1) * 40}px`
                      }">
                        <span style="display: block"
                          v-for="(t, n) in v.reservationInfo.serviceNameArr"
                          :key="n">{{ t }}</span>
                        <span class="show_item_card_desc_remark"
                          :style="[(!v.reservationInfo.serviceNameArr || !v.reservationInfo.serviceNameArr.length) && { 'margin-top': 0 }]"
                          v-if="v.reservationInfo.projectDesc">
                          备注：{{ v.reservationInfo.projectDesc }}
                        </span>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  workInfo,
  createOrder,
  phoneGetInfo,
  workTime,
  getStorePlanTime,
  closeStorePlan,
  openStorePlan,
  lifiWorkInfo,
  restorePlan
} from "@/api/service/workbench";
import {
  phoneGetUser,
} from "@/api/service/makePlan";
import { mapGetters } from 'vuex'

export default {
  data () {

    return {
      startWorkTime: '08:00',
      endWorkTime: '24:00',
      stepTime: 15,
      boardList: [],
      planStep: [],
      countPlanBoxW: 0,
      hoverTimeStr: null,
      hoverDate: '',
      cardWidth: 200,
      secondWidth: 160,
      minWidth: 140,
      floatIdx: 0,
      timeStepLeft: 0,
      timeStepTop: 0,
      showDialog: false,
      selectLoading: false,
      phoneList: [],
      customerSearch: '',

      refreshTimes: '',
      subscribeTime: '',
      subscribeTimeShow: false,
      selectTimeList: [],
      subscribeTimeList: [],
      expireTimeOPtion: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
    }
  },
  props: {
    storeId: {
      type: [String, Number]
    },
    selectDate: {
      type: Array,
      default: function () {
        return []
      }
    },
    dataStatus: {
      type: Array,
      default: function () {
        return []
      }
    },
    storeTitle: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    showStartDate () {
      if (this.selectDate.length > 0) {
        let days = this.selectDate[0].date.split('-').splice('1')
        return `${days[0]}月${days[1]}日`
      }
      return '--'
    },
    showEndDate () {
      if (this.selectDate.length > 0) {
        let days = this.selectDate[this.selectDate.length - 1].date.split('-').splice('1')
        return `${days[0]}月${days[1]}日`
      }
      return '--'
    },
    planBoxLine () {
      let h = 0
      this.planStep.forEach(item => {
        h += item.step.length
      })
      return h
    },
    endWorkTimeStr () {
      if (this.endWorkTime) {
        let timeArr = this.endWorkTime.split(':')
        let a = timeArr[0], b = timeArr[1]
        let endAllTime = (a * 60 * 60 + b * 60 - this.stepTime * 60) / 60

        return `${parseInt(endAllTime / 60)}: ${endAllTime % 60}`
      }
      return ''
    }
  },
  watch: {
    selectDate (val) {
      this.getData()
      this.intervalData()
    },
    dataStatus () {
      this.getData()
      this.intervalData()
    },
    storeId () {
      this.getInitData()
    }
  },
  created () {
    this.getInitData()

    this.subscribeTime = new Date().format('yyyy-MM-dd')

  },
  activated () {
    this.timeStepLeft = 0
    this.timeStepTop = 0
    setTimeout(() => {
      this.intervalData()
    })
  },
  deactivated () {
    clearInterval(this.refreshTimes)
  },
  mounted () {
    let str = `${this.endWorkTime.split(':')[0]}${this.endWorkTime.split(':')[1]}`
    str = str.substring(0, 3)
    this.floatIdx = parseFloat(str)
    this.$nextTick(() => {
      this.$refs.boardPlan.addEventListener('scroll', this.boardPlanScroll, true)
    })
  },
  beforeDestroy () {
    this.$refs.boardPlan.removeEventListener('scroll', this.boardPlanScroll)
  },
  methods: {
    toOptTime (date, item) {
      // this.$confirm('确认恢复当前时间吗?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(async () => {
      //   let res = await restorePlan({
      //     workDate: date,
      // 		startTimeStr: item.disableStartT,
      // 		endTimeStr: item.disableEndT
      //   })
      //   if (res) {
      //     this.msgSuccess('操作成功')
      //     this.getData()
      //   }
      // })
    },
    remoteMethod (query) {
      if (query !== '') {
        this.selectLoading = true;
        setTimeout(() => {
          phoneGetUser({ name: query })
            .then(res => {
              this.selectLoading = false;
              this.phoneList = res.data
            })
            .catch(() => { })
        }, 200);
      } else {
        // this.options = [];
      }
    },
    toRefreshData () {
      this.getInitData()
      this.$emit('toRefreshData')
    },

    toCheckTimeDisabled (disabledList, timeStr) {
      if (disabledList && disabledList.length > 0) {
        let isDisabled = false
        disabledList.forEach(item => {
          if (item.startTime == timeStr) {
            isDisabled = true
          }
        })
        return isDisabled
      } else {
        return false
      }
    },
    async getInitData () {
      if (!this.storeId) return

      let res = await workTime({
        storeId: this.storeId
      })
      if (res) {
        let { data } = res
        this.startWorkTime = data.startTime
        // this.endWorkTime = data.endTime
        this.stepTime = data.intervalMinute
        this.initWorkTime()
        this.getData()
        this.intervalData()
      }
    },
    intervalData () {
      clearInterval(this.refreshTimes)
      this.refreshTimes = setInterval(() => {
        this.getData()
      }, 1 * 60 * 1000)
    },
    // 制定方案
    toMakePlan () {
      this.$router.push({
        // path: '/store/memberList/newCustomer',
        path: '/store/customerList/newCustomer',
        query: { type: 'work', showType: 'life', storeId: this.storeId }
      })
    },
    // 确认方案
    toJumpService (info, date) {
      this.$emit('liftViewInfo', {
        ...info,
        date
      })
    },

    boardPlanScroll (e) {
      this.timeStepLeft = this.$refs.boardPlan.scrollLeft
      this.timeStepTop = this.$refs.boardPlan.scrollTop
    },
    async getData () {
      let arr = []
      this.dataStatus.forEach(item => {
        if (item == '3') {
          arr.push('2')
        }
        arr.push(item)
      })
      let res = await lifiWorkInfo({
        startDate: this.selectDate[0].date,
        endDate: this.selectDate[this.selectDate.length - 1].date,
        storeId: this.storeId,
        dataStatus: arr
      })
      if (res) {
        let { data, closeDate } = res
        let dateList = JSON.parse(JSON.stringify(this.selectDate))
        let list = []
        let curDate = new Date().format('yyyy-MM-dd'), stepTimeStr = this.stepTime * 60 * 1000
        dateList.forEach(item => {
          let days = item.date.split('-').splice('1')
          item.monthDateStr = `${days[0]}/${days[1]}`

          // closeDate.forEach(val => {
          //   if (item.date == val.workDate) {
          //     if (!item.disabledList) item.disabledList = []

          //     let startT = val.startTime.split(':'), endT = val.endTime.split(':')
          //     item.disabledList.push({
          //       startTime: `${startT[0]}:${startT[1]}`,
          //       endTime: `${endT[0]}:${endT[1]}`,
          //       workDate: val.workDate
          //     })
          //   } else {
          //     item.disabledList = []
          //   }
          // })

          data.forEach(val => {
            if (val.children) {
              val.children.forEach(v => {
                // if (v.technicianName == '玉仁') { 
                //   v.technicianId = 299
                // }
                if (v.reservationInfo && v.reservationInfo.serviceName) {
                  v.reservationInfo.serviceNameArr = v.reservationInfo.serviceName.split(',')
                }
              })

              val.children.forEach(v => {
                v.disableList = []
                closeDate.forEach(sv => {
                  if (val.date == sv.workDate && sv.technicianId == v.technicianId) {
                    let startT = sv.startTime.split(':'), endT = sv.endTime.split(':')
                    let valTimeStr = new Date(`${curDate} ${endT[0]}:${endT[1]}`) - new Date(`${curDate} ${startT[0]}:${startT[1]}`)
                    v.disableList.push({
                      disableStartT: `${startT[0]}:${startT[1]}`,
                      disableEndT: `${endT[0]}:${endT[1]}`,
                      disabledNeedStep: Math.ceil(valTimeStr / stepTimeStr) || 1,
                      remark: sv.remark
                    })
                  }
                })

              })
            }

            if (item.date == val.date) {
              let repeatCount = 1, repeatTime = '', repeatIndex = 0
              val.children.forEach(cVal => {
                let valTimeStr = ''
                if (cVal.endDate) {
                  valTimeStr = new Date(`${curDate} ${cVal.endDate}`) - new Date(`${curDate} ${cVal.time}`)
                }
                if (valTimeStr) {
                  cVal.needStep = Math.ceil(valTimeStr / stepTimeStr)
                } else {
                  cVal.needStep = 2
                }

                let str = `${cVal.time.split(':')[0]}${cVal.time.split(':')[1]}`
                str = str.substring(0, 3)
                cVal.cIdx = parseFloat(str)
                let repeat = val.children.filter(v => v.time == cVal.time)
                if (repeat.length > 1) {
                  if (repeatTime == cVal.time) {
                    repeatIndex++
                  } else {
                    repeatIndex = 0
                  }
                  cVal.repeatTime = cVal.time
                  cVal.repeatCount = repeat.length
                  cVal.repeatIndex = repeatIndex
                  repeatTime = cVal.time
                  repeatCount = repeat.length
                } else {
                  cVal.repeatTime = ''
                  cVal.repeatCount = ''
                  cVal.repeatIndex = ''
                }
              })
              item.repeatCount = repeatCount
              item = {
                ...item,
                ...val
              }
            }
          })
          list.push(item)
        })
        let newList = []
        list.forEach((item, index) => {
          newList[index] = {
            ...item,
            technicianList: [],
            children: []
          }
          if (item.children) {
            let values = {}, ids = []
            item.children.forEach(val => {
              if (ids.indexOf(val.technicianName) < 0) {
                ids.push(val.technicianName)
                values[val.technicianName] = [val]
              } else {
                values[val.technicianName].push(val)
              }
              newList[index].children = Object.values(values)
            })
            newList[index].technicianList = Object.keys(values)
          }
        })
        // console.log(newList, '----')
        this.boardList = newList
        // console.log(newList, '-=========')
      }

    },
    getEndTimeStr (startTime) {
      let curDate = new Date().format('yyyy-MM-dd')
      let endTime = new Date(`${curDate} ${startTime}`).getTime() + this.stepTime * 60 * 1000
      let endH = new Date(endTime).getHours(), endM = new Date(endTime).getMinutes()
      if (endH < 10) endH = '0' + endH
      if (endM < 10) endM = '0' + endM

      return `${endH}:${endM}`
    },
    initWorkTime () {
      let startT = parseFloat(this.startWorkTime.split(':')[0]), startTimes = parseFloat(this.startWorkTime.split(':')[1])
      let endT = parseFloat(this.endWorkTime.split(':')[0]), endTimes = parseFloat(this.endWorkTime.split(':')[1])
      let h = 60
      let list = []
      for (let i = startT; i <= endT; i++) {
        if (i < 10) i = '0' + i
        i = i + ''
        let step = []
        if (parseFloat(i) == startT) {
          let t = parseInt(h / this.stepTime), a = 0
          for (let b = 0; b < t; b++) {
            a = b * this.stepTime + ''
            if (a <= startTimes) {
              a = startTimes + ''
            }
            if (a < 10) a = '0' + a
            step.push({
              name: a,
              nameStr: `${i}:${a}`,
              endTimeStr: this.getEndTimeStr(`${i}:${a}`)
            })
          }
          let obj = {};
          step = step.reduce(function (item, next) {
            obj[next.nameStr] ? '' : obj[next.nameStr] = true && item.push(next);
            return item;
          }, []);
        } else if (parseFloat(i) == endT) {
          let t = parseInt(endTimes / this.stepTime), a = 0
          for (let b = 0; b < t; b++) {
            a = b * this.stepTime + ''
            if (a < 10) a = '0' + a
            step.push({
              name: a,
              nameStr: `${i}:${a}`,
              endTimeStr: this.getEndTimeStr(`${i}:${a}`)
            })
          }
        } else {
          let t = parseInt(h / this.stepTime), a = 0
          for (let b = 0; b < t; b++) {
            a = b * this.stepTime + ''
            if (a < 10) a = '0' + a
            step.push({
              name: a,
              nameStr: `${i}:${a}`,
              endTimeStr: this.getEndTimeStr(`${i}:${a}`)
            })
          }
        }
        list.push({
          time: i,
          step
        })
      }
      this.planStep = list
    },
    mouseenter (str, date) {
      this.hoverTimeStr = str
      this.hoverDate = date
    },
    mouseleave () {
      this.hoverTimeStr = null
      this.hoverDate = ''
    },
    selectCard (index, idx) {
      // if (this.boardList[index].children) {
      //   this.boardList[index].children[idx].cIdx = this.floatIdx
      //   this.floatIdx++
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.reservation_content {
  flex: 1;
  overflow: hidden;
  height: 100%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #eee;

  .reservation_content_top {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 0 20px;
    position: relative;

    .reservation_content_top_left {
      display: flex;
      align-items: center;
    }

    .show_reservation_date {
      font-size: 14px;
      color: #333;
      margin-right: 10px;
      position: relative;
      z-index: 10;
    }

    .show_reservation_change {
      position: relative;
      z-index: 10;
      display: flex;
      font-size: 24px;
      color: #333;

      .show_reservation_change_icon {
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .show_store_name {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 42px;
      font-size: 20px;
      color: #333;
    }
  }

  .board_plan {
    flex: 1;
    overflow: auto;
    padding-left: 98px;
    position: relative;
  }

  .board_plan_times {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1020;
    background-color: #fff;
    padding-top: 70px;
    width: 98px;

    .board_plan_times_top {
      position: absolute;
      top: 0;
      left: 0;
      width: 98px;
      height: 71px;
      z-index: 1;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
    }

    .board_plan_times_item {
      display: flex;
      background-color: #fff;

      &:not(:first-child) {
        .plan_item_time {
          border-top: none;
        }
      }

      .plan_item_time {
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #333;
        border: 1px solid #eee;
        border-left: none;
      }

      &:first-child {
        border-top: 1px solid #eee;

        .plan_item_time {
          border-top: none;
        }
      }

      .plan_item_step_list {
        .plan_item_step {
          height: 40px;
          border-bottom: 1px solid #eee;

          .play_item_step_txt {
            width: 98px;
            height: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #333;
          }

          .play_item_step_txt_hover {
            background-color: rgba(93, 169, 239, 0.15);
          }
        }
      }
    }
  }

  .board_plan_date {
    position: relative;
    width: 100%;
    white-space: nowrap;

    .board_plan_date_item {
      display: inline-block;
      height: 100%;

      .board_plan_date_top {
        height: 41px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        color: #333;
        position: relative;

        .board_plan_date_top_float {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1010;
          width: 100%;
          height: 100%;
          line-height: 20px;
          text-align: center;
          border-bottom: 1px solid #eee;
          padding: 10px;
          background-color: #fff;
          border-left: 1px solid #eee;
        }
      }

      .board_plan_date_technician {
        height: 30px;
        position: relative;
        text-align: center;
        font-size: 14px;
        color: #333;
        position: relative;
        border-left: 1px solid #eee;

        .item_board_plan_technician {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1010;
          width: 100%;
          height: 100%;
          line-height: 30px;
          text-align: center;
          border-bottom: 1px solid #eee;
          padding: 0 10px;
          background-color: #fff;
        }

        .item_board_plan_technician_box {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;

          .item_board_plan_technician {
            border-right: 1px solid #eee;
          }
        }
      }

      .board_plan_date_line {
        width: 100%;

        .board_plan_date_line_item {
          width: 100%;
          height: 40px;
          position: relative;
          border-left: 1px solid #eee;
          border-bottom: 1px solid #eee;
        }

        .show_item_disabled_box {
          position: absolute;
          top: 0;
          left: 0;
          background-color: #eee;
          font-size: 12px;
          color: #333;
          padding: 6px;
          &:hover {
            cursor: pointer;
            z-index: 9999;
          }
        }

        .show_item_card {
          position: absolute;
          top: 0;
          left: 0;
          padding: 0 4px;
          min-height: 120px;

          &:hover {
            z-index: 999 !important;
          }

          .show_item_card_box {
            width: 100%;
            height: 100%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            background-color: #fff;
          }

          .show_item_card_title {
            height: 40px;
            width: 100%;

            .show_item_card_title_txt {
              height: 20px;
              text-align: center;
              line-height: 20px;
              font-size: 12px;
              color: #fff;
              padding: 0 5px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .show_item_card_title_time {
              text-align: center;
              line-height: 20px;
              font-size: 12px;
              color: #fff;
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: center;

              .show_item_card_tag {
                display: inline-block;
                background-color: orange;
                padding: 2px;
                border-radius: 1px;
                margin-left: 10px;
                line-height: 1;
              }
            }
          }

          .show_item_card_desc {
            width: 100%;
            padding: 6px 10px;
            font-size: 12px;
            min-height: 40px;
            color: #333;
            white-space: normal;
            word-break: break-all;
            line-height: 20px;
            overflow-y: auto;

            .show_item_card_desc_remark {
              display: block;
              color: #999;
              padding-top: 5px;
              margin-top: 5px;
            }
          }
        }

        .show_item_date {
          width: 100%;
          text-align: center;
          line-height: 38px;
          font-size: 12px;
          color: #999;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          border-right: 1px solid #eee;
        }

        .board_plan_date_line_item_hover {
          background-color: rgba(93, 169, 239, 0.15);
        }

        .board_plan_date_line_date_hover {
          .show_item_date {
            display: inline-block;
          }
        }

        .board_plan_date_line_date_disabled {
          background-color: #eee;

          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>